<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    搜索结果
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        {% if msg == "搜索成功" %}
            {# 课程 #}
            <div class="columns is-multiline box">
                <div class="column is-full box has-background-primary">
                    <h3 class="title is-3">搜索结果</h3>
                </div>
                {# 课程列表 #}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 课程列表 #}
                        {% for course in course_inter %}
                            <div class="column is-3-desktop">
                                <div class="card">
                                    <div class="card-image">
                                        <a href="{% url 'courses:home' course.id %}">
                                            <figure class="image is-16by9">
                                                <img src="{{ MEDIA_URL }}{{ course.image }}"
                                                     alt="Placeholder image">
                                            </figure>
                                        </a>
                                    </div>
                                    <div class="card-content has-background-primary">
                                        <div class="media">
                                            <div class="media-content has-text-centered">
                                                {# 课程名 #}
                                                <p class="title is-3 has-text-white">
                                                    <a href="{% url 'course:home' course.id %}"
                                                       class="has-text-link-light">
                                                        {{ course.name }}
                                                    </a>
                                                </p>
                                                <hr>
                                                {# 课程信息 #}
                                                <div class="columns is-multiline">
                                                    {# 课程时长 #}
                                                    <div class="column is-full">
                                                                    <span>
                                                                        <strong class="has-text-white">
                                                                            课&nbsp;程&nbsp;时&nbsp;长
                                                                            <i class="fa fa-clock-o"
                                                                               aria-hidden="true"></i>
                                                                            ：{{ course.learn_times }}
                                                                        </strong>
                                                                    </span>
                                                    </div>
                                                    {# 学生数 #}
                                                    <div class="column is-full">
                                                                    <span>
                                                                        <strong class="has-text-white">
                                                                            学&nbsp;生&nbsp;数
                                                                            <i class="fa fa-address-card"
                                                                               aria-hidden="true"></i>
                                                                            ：{{ course.students }}
                                                                        </strong>
                                                                    </span>
                                                    </div>
                                                    {# 收藏数 #}
                                                    <div class="column is-full">
                                                                    <span>
                                                                        <strong class="has-text-white">
                                                                            收&nbsp;藏&nbsp;数
                                                                            <i class="fa fa-star"
                                                                               aria-hidden="true"></i>
                                                                            ：{{ course.fav_nums }}
                                                                        </strong>
                                                                    </span>
                                                    </div>
                                                    {# 难度 #}
                                                    <div class="column is-full">
                                                                    <span>
                                                                        <strong class="has-text-white">
                                                                            难&nbsp;&nbsp;度
                                                                            <i class="fa fa-google-wallet"
                                                                               aria-hidden="true"></i>
                                                                            ：{{ course.get_degree_display }}
                                                                        </strong>
                                                                    </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        {% else %}
            <div class="columns is-multiline box">
                <div class="column is-full box has-background-primary">
                    <h3 class="title is-3">{{ msg }}</h3>
                </div>
            </div>
        {% endif %}
    </main>
{% endblock content %}
